<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back()"></div>
      <div class="name">我要反馈</div>
      <div></div>
    </div>


    <div class="feedback">
    	<h3>我遇到的问题</h3>
    	<div class="topic-list">
    		<span :class="{'active' : feedbackActive == index}" v-for="(item,index) in feedbackList" @click="setFeedbackActive(index)">{{item.problem}}</span>
    	</div>
<!--     	<h3>反馈内容</h3>
    	<div class="feedback-m">
    		<textarea class="feedback-val" placeholder="请描述你的问题，我们将尽快解答。" v-model="contentVal"></textarea>
    		<div class="upimg-box">
    			<div class="up-img">
	    			<img src="../assets/images/icon/up-icon.png">
	    			<input type="file" capture="camera" accept="image/*">
    			</div>
    		</div>
    	</div>
    	<h3>联系方式</h3>
    	<div class="contact">
    		<input type="text" placeholder="比如手机号，QQ号，微信号等等" v-model="contactVal">
    	</div> -->

    	<div class="submit" @click="submit();">提交</div>
    </div>



  </div>
</template>
<script>
	import { Toast } from 'mint-ui';
    export default {
    	name: 'answer',
    	components: {

	    },
    	data () {
      		return {
      			contactVal:'',
      			contentVal:'',
      			feedbackList:[],
      			feedbackActive:0
	      	}
	    },
	    created(){
			this.$axios.post(
              this.$store.state.url+"feed_back_config?device_sn="+this.$store.state.device,
              {device_sn:this.$store.state.device}).then(res=>{
                console.log(res.data);
                this.feedbackList = res.data.list;
          	});
	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
	      	setFeedbackActive(val){
	      		this.feedbackActive = val;
	      	},
	      	submit(){
	      		if(this.contentVal == ''){
	      			Toast({
		                message: '请输入您的反馈内容！',
		                position: 'middle',
		                duration: 1000
		            });
	      			return false;
	      		}
	      		if(this.contactVal == ''){
	      			Toast({
		                message: '请输入您呢的联系方式!',
		                position: 'middle',
		                duration: 1000
		            });
	      			return false;
	      		}
	      		this.$axios.get(
	      				this.$store.state.url+"add_feed_back?content="+this.contentVal+"&contact="+this.contactVal+"&config_id="+this.feedbackActive+"&device_sn="+this.$store.state.device
                    ).then(res=>{
                    	
			    	Toast({
		                message: res.data.message,
		                position: 'middle',
		                duration: 1000
		            });
			    });

	      	}
	    }
  	}
</script>
<style lang="scss" scoped>
	.feedback{
		h3{
			font-size:30px;
			color:#707070;
			line-height:75px;
			font-weight: normal;
			background-color:#fafafa;
			padding:0 20px;
		}
		.topic-list{
			padding:50px;
			span{
				display: inline-block;
				line-height:75px;
				border:2px solid #4f4f4f;
				padding:0 20px;
				font-size:28px;
				margin-right:50px;
				margin-bottom:40px;
				border-radius:5px;
				color:#4f4f4f;
				&.active{
					color:#0060dc;
					border-color:#0060dc;
				}
			}
		}
		.feedback-m{
			.feedback-val{
				width:100%;
				height:190px;
				padding:20px;
				font-size:28px;
			}
			.upimg-box{
				margin-top:30px;
				position: relative;
				padding:0 30px 30px;
				input{
					position: absolute;
					top:0;
					width:100%;
					height:100%;
					opacity:0;
					left:0;
				}
				.up-img{
					width:100px;
					padding:30px;
					border:1px dashed #d0d0d0;
					position: relative;
				}
			}
		}
		.contact{
			input{
				width:100%;
				font-size:28px;
				line-height:90px;
				padding:0 30px;
			}
		}
	}
	.submit{
		line-height:90px;
		width:100%;
		text-align:center;
		font-size:32px;
		margin-top:20px;
		position: fixed;
		bottom:0;
		left:0;
		background-color:#fff;
		z-index: 10;
		border-top:1px solid #4f4f4f;
	}
</style>
